<template>
  <el-container style="height: 98vh; border: 1px solid #eee;background: #fff">
    <el-aside width="20%" style=" background: #3cadeb;box-shadow: 2px 0 6px rgba(0,0,0,0.1);height: 98vh;">
	  <el-image :src="logoURL"></el-image>
      <el-menu 
        active-background-color="#2a7aad"
        :default-openeds="['1', '3']"
        style="height: 85%; margin-bottom: 3%; background-color: #3cadeb;"
        text-color="#fff" 
        active-text-color="#3cadeb"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>
            <span>课程管理</span>
          </template>
          <el-menu-item index="1-1" style="background-color: #89cbec;">课程管理1</el-menu-item>
        </el-submenu>
      
        <!-- 其他菜单项保持相同结构 -->
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>成绩管理</span>
          </template>
          <el-menu-item index="2-1" style="background-color: #89cbec;">成绩管理1</el-menu-item>
        </el-submenu>
      
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>教室查询</span>
          </template>
          <el-menu-item index="3-1" style="background-color: #89cbec;">查询1</el-menu-item>
        </el-submenu>
      
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>个人信息管理</span>
          </template>
          <el-menu-item index="4-1" style="background-color: #89cbec;">信息</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
	
	 <el-container>
	    <el-header style="text-align: right; font-size: 24px;height: 105px;">
		  <el-image :src="welcome_img" style="height: 50px;margin-top: 40px;margin-right: 20px;margin-left: 30px;"></el-image>
	      <span class="welcome-3d">您好！{{username}}</span>
	    </el-header>
	    
	    <el-main>

	    </el-main>
	  </el-container>
	
	
  </el-container>
</template>

<script>

export default {
    name: "LoginView",
    data() {
        return {
            logoURL: require("@/assets/" + "eSchool.jpg"),
			welcome_img:require("@/assets/welcome.jpg"),
			user:null,
			username:''
        }
    },
    created() {
		this.getUserInfo()
    },
    methods: {
        getUserInfo(){
			const userInfo = JSON.parse(sessionStorage.getItem("user"))
			this.username = userInfo?.data?.username || '未知用户'
			this.user = userInfo
		}
    }
}

</script>

 <style scoped>
    /deep/ .el-submenu__title,
    /deep/ .el-menu-item {
            color: #fff ;
          }
    /deep/ .el-submenu__title i {
            color: #fff ;
          }
		  
	/deep/ .el-menu-item:hover,
	/deep/ .el-submenu__title:hover {
	  color: #3cadeb !important; /* 改为你想要的悬停颜色 */
	}
	
	/* 单独修改图标悬停颜色 */
	/deep/ .el-submenu__title:hover i,
	/deep/ .el-menu-item:hover i {
	  color: #3cadeb !important;
	}
	
	.welcome-3d {
	  display: inline-block;
	  font-size: 28px;
	  font-weight: 800;
	  color: #3cadeb;
	  text-transform: uppercase;
	  transform: rotateX(15deg) rotateY(-5deg);
	  text-shadow: 
	    1px 1px 1px #ffffff,
	    1px 2px 1px #ffffff,
	    1px 3px 1px #ffffff,
	    2px 4px 6px rgba(0,0,0,0.2);
	  animation: float 3s ease-in-out infinite;
	}
	
	@keyframes float {
	  0%, 100% { transform: translateY(0) rotateX(15deg) rotateY(-5deg); }
	  50% { transform: translateY(-5px) rotateX(20deg) rotateY(5deg); }
	}
</style>